<template>
  <div class="footer">
    <div class="footer-info">
      <div class="icon">
        <h3>下载QQ音乐客户端</h3>
        <ul class="nav">
          <li>
            <a>
              <i class="icon-pc"></i>
              PC版
            </a>
          </li>
          <li>
            <a>
              <i class="icon-mac"></i>
              Mac版
            </a>
          </li>
          <li>
            <a>
              <i class="icon-and"></i>
              Android版
            </a>
          </li>
          <li>
            <a>
              <i class="icon-ip"></i>
              iPhone版
            </a>
          </li>
        </ul>
      </div>
      <div class="icon" id="spe1">
        <h3>特色产品</h3>
        <ul class="nav spe">
          <li>
            <a>
              <i class="icon-qm"></i>
              全民K歌
            </a>
          </li>
          <li>
            <a>
              <i class="icon-ss"></i>
              Super Sound
            </a>
          </li>
          <li>
            <a>
              <i class="icon-qp"></i>
              QPlay
            </a>
          </li>
          <li>
            <a>
              <i class="icon-fan"></i>
              Fan直播伴侣
            </a>
          </li>
        </ul>
        <div id="div1">
          <a href>车载互联</a>
        </div>
        <div id="div2">
          <a href>QQ演出</a>
        </div>
      </div>
      <div class="icon">
        <h3>合作链接</h3>
        <div class="nav" id="spe">
          <div>
            <a href>CJ ENM</a>
          </div>
          <div>
            <a href>腾讯视频</a>
          </div>
          <div>
            <a href>手机QQ空间</a>
          </div>
          <div>
            <a href>最新版QQ</a>
          </div>
          <div>
            <a href>腾讯社交广告</a>
          </div>
          <div>
            <a href>电脑管家</a>
          </div>
          <div>
            <a href>QQ浏览器</a>
          </div>
          <div>
            <a href>腾讯微云</a>
          </div>
          <div>
            <a href>腾讯云</a>
          </div>
          <div>
            <a href>企鹅FM</a>
          </div>
          <div>
            <a href>智能电视网</a>
          </div>
          <div>
            <a href>当贝市场</a>
          </div>
        </div>
      </div>
      <div class="icon">
        <h3>开放平台</h3>
        <ul class="nav">
          <li>QQ音乐开放平台</li>
          <li>腾讯音乐人</li>
        </ul>
      </div>
      <div class="icon">
        <h3>TME集团官网</h3>
        <ul class="nav">
          <li>腾讯音乐人</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script >
export default {
  name: "Footer",
};
</script>

<style >
/* * {
  margin: 0;
  padding: 0;
}
ul,
li {
  padding: 0;
  margin: 0;
  list-style: none;
} */
.footer {
  width: 100%;
  height: 643px;
  background-color: #333;
  color: #999;
  font-size: 15px;
  overflow: hidden;
}
.footer-info {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}
.nav {
  display: flex;
}
.icon {
  width: 380px;
  margin-top: 50px;
}
.icon h3 {
  padding: 80px 0 30px 0;
  float: left;
  font-weight: 200;
}
.icon ul {
  margin-left: -15px;
}
.icon li {
  width: 95px;
  height: 81px;
  /* display: block; */
}
.icon li a i {
  display: block;
  margin: 0 auto;
  width: 37px;
  height: 48px;
}
.icon-pc {
  background-image: url("./footer@2x.2f424f62.png");
  background-size: 2000%;
}
.icon-pc:hover {
  background-image: url("./footer@2x.2f424f62.png");
  background-position: 0 -45px;
  background-size: 2000%;
}
.icon-mac {
  width: 46px !important;
  background-image: url("./footer@2x.2f424f62.png");
  background-position: -90px 0px;
  background-size: 1700%;
}
.icon-mac:hover {
  width: 46px !important;
  background-image: url("./footer@2x.2f424f62.png");
  background-position: -90px -48px;
  background-size: 1700%;
}
.icon-and {
  background-image: url("./footer@2x.2f424f62.png");
  background-position: -175px 0px;
  background-size: 2000%;
}
.icon-and:hover {
  background-image: url("./footer@2x.2f424f62.png");
  background-position: -175px -45px;
  background-size: 2000%;
}
.icon-ip {
  background-image: url("./footer@2x.2f424f62.png");
  background-position: -255px 0px;
  background-size: 2000%;
}
.icon-ip:hover {
  background-image: url("./footer@2x.2f424f62.png");
  background-position: -255px -45px;
  background-size: 2000%;
}
.icon-qm {
  width: 41px !important;
  background-image: url("./footer@2x.2f424f62.png");
  background-position: -360px 0px;
  background-size: 1900%;
}
.icon-qm:hover {
  width: 41px !important;
  background-image: url("./footer@2x.2f424f62.png");
  background-position: -360px -47px;
  background-size: 1900%;
}
.icon-ss {
  background-image: url("./footer@2x.2f424f62.png");
  background-position: -430px 0px;
  background-size: 2000%;
}
.icon-ss:hover {
  background-image: url("./footer@2x.2f424f62.png");
  background-position: -430px -45px;
  background-size: 2000%;
}
.icon-qp {
  background-image: url("./footer@2x.2f424f62.png");
  background-position: -520px 0px;
  background-size: 2000%;
}
.icon-qp:hover {
  background-image: url("./footer@2x.2f424f62.png");
  background-position: -520px -45px;
  background-size: 2000%;
}
.icon-fan {
  width: 42px !important;
  background-image: url("./footer@2x.2f424f62.png");
  background-position: -648px 0px;
  background-size: 1900%;
}
.icon-fan:hover {
  width: 42px !important;
  background-image: url("./footer@2x.2f424f62.png");
  background-position: -648px -51px;
  background-size: 1900%;
}
#spe {
  display: flex;
  flex-wrap: wrap;
  width: 400px;
}
#s pe div {
  width: 100px;
}
#spe1 {
  position: relative;
}
#spe1 #div1 {
  /* display: inline-block; */
  position: absolute;
  top: 250px;
  margin: 0;
}
#spe1 #div2 {
  /* display: inline-block; */
  position: absolute;
  top: 250px;
  right: 100px;
  margin: 0 50px;
}
div a {
  color: #999;
}
div a:hover {
  color: #31c27c !important;
}
</style>
